<template>
  <div>
    <el-card class="navWrap">
      <el-button
        type="text"
        class="btn"
        icon="el-icon-d-arrow-left"
        @click="$emit('goTrading')"
      ></el-button>
      <div class="nav">新建一个合同订单</div>
      <div>新建一个合同订单</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="msg">基本信息</span>
      </div>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="name" placeholder="标题">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item
            label="返回的评论"
            prop="comment"
            placeholder="返回的评论"
          >
            <el-input v-model="ruleForm.comment"></el-input>
          </el-form-item>

          <!-- 买方 -->
          <el-form-item label="买方" prop="buy">
            <el-select filterable allow-create v-model="ruleForm.buy">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <!-- 卖方 -->
          <el-form-item label="卖方" prop="sell">
            <el-select filterable allow-create v-model="ruleForm.sell">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <!-- 回报赞助商 -->
          <el-form-item label="回报赞助商" prop="operation">
            <el-select filterable allow-create v-model="ruleForm.operation">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <!-- 审计的地位 -->
          <el-form-item label="审计的地位" prop="pargain">
            <el-select filterable allow-create v-model="ruleForm.pargain">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <!-- 平台 -->
          <el-form-item label="平台">
            <el-select disabled value="双链生鲜供应链平台">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AddSales",
  data() {
    return {
      ruleForm: {
        name: "", //标题
        comment: "", //评论
        buy: "", //买方
        sell: "", //卖方
        operation: "",
        pargain: "",
        allPrice: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入", trigger: "" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        comment: [{ required: true, message: "请输入", trigger: "" }],

        buy: [{ required: true, message: "请输入", trigger: "change" }],

        sell: [{ required: true, message: "请输入", trigger: "change" }],

        operation: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        pargain: [{ required: true, message: "请输入", trigger: "change" }],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let result = await this.$API.sales.getAdd();
      console.log(result);
    },
  },
};
</script>

<style lang='less' scoped>
.nav {
  font-size: 20px;

  // vertical-align: bottom;
  margin: 10px 50px 25px 50px;
  display: inline-block;
}
.btn {
  font-size: 25px;
  position: absolute;
  top: 18px;
}
.box-card {
  width: 97%;
  margin: 30px auto;
  .msg {
    font-size: 16px;
  }
  ::v-deep.el-card__body {
    width: 800px;
    margin: 0 auto;
  }
}
.demo-ruleForm {
  ::v-deep.el-input__inner {
    width: 500px;
  }
}
</style>
